@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

$vw_base : 1920;

@function vw ($p) {
  @return ($p/$vw_base) * 100vw
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// main-container global css
.app-container {
  padding: vw(30);

  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  // 1. 常规列表页面：上方搜索框 下方列表
  .common-top {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px 1px rgba($color: #000000, $alpha: 0.1);
    margin-bottom: vw(20);
    display: flex;
    justify-content: space-between;

    .top-left {
      display: flex;
    }

    .top-right {
      display: flex;
    }
  }

  .common-table-wrapper {
    padding: 20px;
    box-shadow: 0 0 15px 1px rgba($color: #000000, $alpha: 0.1);
    background: #fff;
    border-radius: 5px;
  }
}

// ======================= atomic classes area -------------
.flex {
  display: flex;
}

.column {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.space-aroud {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.f1 {
  flex: 1;
}

.wrap {
  flex-wrap: wrap;
}

.shadow {
  box-shadow: 0 0 10px 2px rgba($color: #000000, $alpha: 0.1);
}

.radius-4 {
  border-radius: vw(4);
}

.mr-20 {
  margin-right: vw(20);
}

.mr-5 {
  margin-right: vw(5);
}

.ml-20 {
  margin-left: vw(20);
}

.ml-5 {
  margin-left: vw(5);
}

.mt-20 {
  margin-top: vw(20);
}

.mb-20 {
  margin-bottom: vw(20);
}

.mb-29 {
  margin-bottom: vw(29);
}

.pr-20 {
  padding-right: vw(20);
}

.pl-20 {
  padding-left: vw(20);
}

.pt-20 {
  padding-top: vw(20);
}

.pb-20 {
  padding-bottom: vw(20);
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.start {
  justify-content: flex-start;
}

.end {
  justify-content: flex-end;
}

.mr-10 {
  margin-right: vw(10);
}

.mb-10 {
  margin-bottom: vw(10);
}

.mr-30 {
  margin-right: vw(30);
}

.mt-40 {
  margin-top: vw(40);
}

.w-100 {
  width: vw(100);
}

.w-150 {
  width: vw(150);
}

.mr-40 {
  margin-right: vw(40);
}

.self-end {
  justify-self: flex-end;
}

.self-start {
  justify-self: flex-start;
}

.mb-25 {
  margin-bottom: vw(25);
}

.mt-10 {
  margin-top: vw(10);
}

.w-300 {
  width: vw(300);
}

.font-14 {
  font-size: 14px;
}

.mt-29 {
  margin-top: vw(29);
}

.mb-15 {
  margin-bottom: vw(15);
}

.w-80 {
  width: vw(80);
}

.bold {
  font-weight: bold;
}

.ml-30 {
  margin-left: vw(30);
}
